<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <template id="add">
        <div>
            <textarea name="" id="" cols="30" rows="10"  v-model='ipt'></textarea>
            <button @click='btn'>发表</button>
        </div>
    </template>
    <template id="pl">
        <div >
            <p v-for='(item,idx) in res'>
              {{item.name}}  {{item.content}}  {{item.date}} {{item.like}}
                <button @click='like(item)'>点赞</button><button @click='top(idx)'>置顶</button><button @click='del(idx)'>删除</button>
            </p>
        </div>
    </template>
    <div id="app">
        <add @goto='addData'></add>
        <pl :res='contents'></pl>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        Vue.component('add',{
            template:'#add',
            data(){
                return{
                    i:0,
                    ipt:'',
                    contents:[
                        {
                            id:1,
                            name:'小黑',
                            content:'喜爱的',
                            date:'2021-11-11',
                            like:0
                        }
                    ]
                }
            },
            created(){
                this.$emit('goto',this.contents)
            },
            methods: {
                btn(){
                    if(this.ipt =='') return
                    this.contents.push({id:1,name:'xxx',content:this.ipt,date:'2021-11-11 ',like:0})
                    this.$emit('goto',this.contents)
                    this.i++
                    this.ipt='' 
                }
            }
        })
        Vue.component('pl',{
            props:["res"],
            template:'#pl',
            methods: {
                like(item){
                    console.log(item);
                    item.like++
                    console.log(item);
                },
                del(idx){
                    this.res.splice(idx,1)
                },
                top(idx){
                    this.res.unshift(this.res[idx])
                    this.res.splice(idx+1,1)
                }
            }
        })
        let vm = new Vue({
            el:'#app',
            data:{
                contents:[]
            },
            methods: {
                addData(data){
                    this.contents=data
                }
            }
        })
    </script>
</body>
</html>